<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>Rotating Image Carousel</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays the Search Results control.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
    <script>
        $includeScript(this.url, "~sitecollection/_catalogs/masterpage/$clientNameWithoutSpaces$/DisplayTemplates/Group_SearchResults_NoMarkup.js");
    </script>

    <div id="Control_SearchResults_Carousel">
<!--#_        
        // Don't remove the following line
        ctx.ListDataJSONGroupsKey = "ResultTables";

        // Set the Group Display Template
        ctx.ClientControl.set_groupTemplateId('~sitecollection/_catalogs/masterpage/$clientNameWithoutSpaces$/DisplayTemplates/Group_SearchResults_NoMarkup.js');
        
        // Flag the first item as active
        ctx.OnPostRender = function() {
            $("div.item").first().addClass("active");
        };
_#-->
        <div id="search-results-carousel" class="carousel slide" data-ride="carousel">
 
            <div class="carousel-inner"> 
                _#= ctx.RenderGroups(ctx) =#_ 
            </div>
 
<!--#_ 
        // Use the Paging checkbox on the web part control to decide whether or not to show the Prev/Next carousel controls
        if(ctx.ClientControl.get_showPaging()){
_#-->
            <!-- Controls -->
            <a class="left carousel-control" href="#search-results-carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#search-results-carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a> 
<!--#_ 
        }
_#-->
        </div>

    </div>
</body>
</html>